<template>
  <div class="container">
    <Alert>
      <Form :model="searchObj" inline>
        <FormItem>
          <Input
            v-model="searchObj.project_name"
            class="search-input"
            clearable
            placeholder="请输入项目名称"
          />
        </FormItem>
        <FormItem>
          <Select
            clearable
            v-model="searchObj.project_type"
            style="width: 200px"
          >
            <Option value="1">补贴类</Option>
            <Option value="2">建设类</Option>
            <Option value="3">购买商品和服务类</Option>
            <Option value="99">其他</Option>
          </Select>
        </FormItem>
        <FormItem>
          <Button class="search-btn" type="primary" @click="searchAction">
            <Icon type="ios-search" />
            搜索
          </Button>
        </FormItem>
        <FormItem>
          <Button class="search-btn" type="success" @click="addAction">
            <Icon type="md-add" />
            添加
          </Button>
        </FormItem>
      </Form>
    </Alert>
    <Row>
      <vxe-toolbar custom export></vxe-toolbar>
      <vxe-table
        border
        resizable
        export-config
        :tooltip-config="{ theme: 'light', enterable: true, enabled: false }"
        highlight-hover-row
        size="medium"
        :loading="tableLoading"
        align="center"
        header-align="center"
        :sort-config="{ trigger: 'cell' }"
        :data="tableData"
        :checkbox-config="{ checkField: 'checked' }"
      >
        <vxe-table-column type="seq" title="序号" width="60"></vxe-table-column>
        <vxe-table-column
          width="180"
          field="project_name"
          title="项目名称"
        ></vxe-table-column>
        <vxe-table-column width="180" field="project_type" title="项目类型">
          <template v-slot="{ row }">
            <span v-if="row.project_type == '1'">补贴类</span>
            <span v-if="row.project_type == '2'">建设类</span>
            <span v-if="row.project_type == '3'">购买商品和服务类</span>
            <span v-if="row.project_type == '99'">其他</span>
          </template>
        </vxe-table-column>
        <vxe-table-column
          width="180"
          field="budget"
          title="预算额度"
        ></vxe-table-column>
        <vxe-table-column
          width="180"
          field="capital_source"
          title="资金来源"
        ></vxe-table-column>
        <vxe-table-column
          width="180"
          field="project_cycle"
          title="项目周期"
        ></vxe-table-column>
        <vxe-table-column
          width="180"
          field="create_time"
          title="创建时间"
        ></vxe-table-column>
        <vxe-table-column width="180" field="fill_state" title="完成状态">
          <template v-slot="{ row }">
            <span v-if="row.fill_state == '0'">草稿</span>
            <span v-if="row.fill_state == '1'">已完成</span>
          </template>
        </vxe-table-column>
        <vxe-table-column
          width="200"
          field="office_name"
          title="填报部门"
        ></vxe-table-column>
        <vxe-table-column width="280" fixed="right" field="action" title="操作">
          <template v-slot="{ row }">
            <!-- <Button
              v-if="row.fill_state != '1' && row.create_by === userId"
              type="primary"
              size="small"
              class="action-btn"
              @click="optionAction(row, 'edit')"
              >编辑</Button
            > -->
            <Button
                v-if="row.create_by === userId&&row.fill_state != '1'"
                type="primary"
                size="small"
                class="warning-btn"
                @click="optionAction(row, 'editCreate')"
            >补充填报</Button
            >
            <Button
              type="info"
              size="small"
              class="action-btn"
              @click="optionAction(row, 'info')"
              >详情</Button
            >
            <Button
              v-if="row.create_by === userId"
              type="error"
              size="small"
              class="action-btn"
              @click="optionAction(row, 'delete')"
              >删除</Button
            >
            <!-- ---切换隐藏显示---------- -->
            <!-- <Button
              type="warning"
              size="small"
              class="warning-btn"
              @click="optionAction(row, 'create')"
              v-if="row.create_by === userId && row.fill_state == '0'"
              >事项管理</Button
            > -->
             <!-- v-if="row.fill_state != '1' && row.create_by === userId" -->

            <!-- ------------------------------- -->
            <Button
              v-if="row.create_by === userId && row.fill_state == '0'"
              type="success"
              size="small"
              class="action-btn"
              @click="finishState(row)"
              >确认提交</Button
            >
            <Button
              v-if="row.create_by === userId && row.fill_state == '1'"
              type="warning"
              size="small"
              class="action-btn"
              @click="cancelState(row)"
              >取消提交</Button
            >
          </template>
        </vxe-table-column>
      </vxe-table>
    </Row>
    <br />
    <Row type="flex" justify="end">
      <Page
        :total="pageObj.totalRecord"
        show-total
        show-sizer
        @on-change="pageChange"
        @on-page-size-change="pageChangeS"
      />
    </Row>
    <details-option ref="detailOption" :dataObj="dataList"></details-option>
  </div>
</template>

<script>
import {
  selectByPage,
  projectDelete,
  updateFillState
} from '@/api/setting/capital'
import DetailsOption from './components/details-option/index'
export default {
  components: { DetailsOption },
  data () {
    return {
      userId: '',
      searchObj: {},
      modalShow: false,
      btnLoading: false,
      formItem: {},
      tableData: [],
      selectData: [],
      tableLoading: false,
      pageObj: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0
      },
      dataList: {},
      isCheck: false
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    addAction () {
      this.$router.push({
        name: 'projectCapital'
      })
    },
    init () {
      this.userId = this.$store.state.user.severUserInfo.data.id
      this.tableLoading = true
      let param = {
        project_name: this.searchObj.project_name,
        project_type: this.searchObj.project_type
      }
      selectByPage(param).then((ret) => {
        let data = ret.data
        if (data.errcode === 0) {
          this.tableData = data.data.results
          this.tableData.forEach((item) => {
            item.create_time = this.$common.xeUtils.toDateString(
              item.create_time
            )
          })
          this.pageObj.totalRecord = data.data.totalRecord
          this.tableLoading = false
        } else {
          this.tableLoading = false
          this.error(data)
        }
      })
    },
    optionAction (val, type) {
      // console.log("得到的数据：", val);
      // localStorage.setItem("val",JSON.stringify(val))
      switch (type) {
        case 'edit':
          this.$router.push({
            name: 'projectCapital',
            query: { id: val.id }
          })
          break
        case 'info':
          this.$router.push({
            name: 'projectMatterDetail',
            query: { id: val.id, aa: val }
          })
          break
        case 'delete':
          this.deleteOption(val.id)
          break
        // case "create":
        //   //  localStorage.setItem("row",JSON.stringify(val))
        //   this.isCheck = true;
        //   this.$router.push({
        //     name: "createMoney",
        //     query: { id: val.id, vtype: "1", project_name: val.project_name },
        //   });
        //   break;
        case 'editCreate':

          this.$router.push({
            name: 'createList',
            query: { id: val.id, vtype: '2', project_name: val.project_name }
          })

          break
      }
    },
    // viewOption (row) {
    //   this.dataList = this.$common.xeUtils.clone(row)
    //   this.$refs.detailOption.modalAction()
    // },
    deleteOption (param) {
      this.$Modal.confirm({
        title: '确认删除？',
        content: '请仔细核对后再操作',
        loading: true,
        onOk: () => {
          projectDelete({ id: param }).then((ret) => {
            let data = ret.data
            if (data.errcode === 0) {
              this.$Modal.remove()
              this.init()
              this.success('删除成功')
            } else {
              this.$Modal.remove()
              this.error(data)
            }
          })
        }
      })
    },
    finishState (row) {
      this.$Modal.confirm({
        title: '确认提交？',
        loading: true,
        onOk: () => {
          let param = {
            id: row.id,
            fill_state: '1'
          }
          updateFillState(param).then((ret) => {
            let data = ret.data
            if (data.errcode === 0) {
              this.$Modal.remove()
              this.init()
              this.success('已完成')
            } else {
              this.$Modal.remove()
              this.error(data)
            }
          })
        }
      })
    },
    cancelState (row) {
      this.$Modal.confirm({
        title: '确认取消提交？',
        loading: true,
        onOk: () => {
          let param = {
            id: row.id,
            fill_state: '0'
          }
          updateFillState(param).then((ret) => {
            let data = ret.data
            if (data.errcode === 0) {
              this.$Modal.remove()
              this.init()
              this.success('已完成')
            } else {
              this.$Modal.remove()
              this.error(data)
            }
          })
        }
      })
    },
    searchAction () {
      this.userId = this.$store.state.user.severUserInfo.data.id
      this.tableLoading = true
      let param = {
        project_name: this.searchObj.project_name,
        project_type: this.searchObj.project_type
      }
      selectByPage(param).then((ret) => {
        let data = ret.data
        if (data.errcode === 0) {
          this.tableData = data.data.results
          this.tableData.forEach((item) => {
            item.create_time = this.$common.xeUtils.toDateString(
              item.create_time
            )
          })
          this.pageObj.totalRecord = data.data.totalRecord
          this.tableLoading = false
        } else {
          this.tableLoading = false
          this.error(data)
        }
      })
    },

    pageChange (current) {
      this.userId = this.$store.state.user.severUserInfo.data.id
      this.tableLoading = true
      let param = {
        project_name: this.searchObj.project_name,
        project_type: this.searchObj.project_type,
        pageNo: current
      }
      selectByPage(param).then((ret) => {
        let data = ret.data
        if (data.errcode === 0) {
          this.tableData = data.data.results
          this.tableData.forEach((item) => {
            item.create_time = this.$common.xeUtils.toDateString(
              item.create_time
            )
          })
          this.pageObj.totalRecord = data.data.totalRecord
          this.tableLoading = false
        } else {
          this.tableLoading = false
          this.error(data)
        }
      })
    },
    pageChangeS (val) {
      this.userId = this.$store.state.user.severUserInfo.data.id
      this.tableLoading = true
      let param = {
        pageSize: val
      }
      selectByPage(param).then((ret) => {
        let data = ret.data
        if (data.errcode === 0) {
          this.tableData = data.data.results
          this.tableData.forEach((item) => {
            item.create_time = this.$common.xeUtils.toDateString(
              item.create_time
            )
          })
          this.pageObj.totalRecord = data.data.totalRecord
          this.tableLoading = false
        } else {
          this.tableLoading = false
          this.error(data)
        }
      })
    },
    success (val) {
      val = this.$common.xeUtils.isEmpty(val) ? '操作成功' : val
      this.$Message.success(val)
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    }
  }
}
</script>

<style scoped lang="less">
.container {
  margin-bottom: 50px;
}

.container /deep/ .ivu-btn-small {
  height: 24px;
  padding: 0 5px;
  font-size: 12px;
  border-radius: 3px !important;
}

.action-btn,
.warning-btn {
  margin-right: 5px;
  margin-bottom: 3px;
}
</style>
